import Vuex from 'vuex'
import Vue from 'vue';
import { nanoid } from 'nanoid'
// 应用Vuex插件，ntotice:在创建store实例之前需要先调用Vue.use(Vuex)
Vue.use(Vuex)

// 准备actions-用于响应组件中的动作
const actions = {
    incrementOdd(context, value) {
        if (context.state.sum % 2) {
            context.commit('increment', value)
        }
    },
    incrementWait(context, value) {
        setTimeout(() => {
            context.commit('increment', value)
        }, 500)
    },
    addPerson(context, value) {
        console.log('actions中的addPerson被调用', context, value);
        if (!value.trim()) {
            alert('姓名不能为空')
            return
        }
        const person = { id: nanoid(), name: value }
        context.commit('ADD_PERSON', person)
    }
}


// 准备mutations-用于操作数据（state）
const mutations = {
    increment(state, value) {
        console.log('mutations中的increment被调用', state, value);
        state.sum += value
    },
    decrement(state, value) {
        state.sum -= value
    },
    ADD_PERSON(state, value) {
        state.persons.unshift(value)
    }
}


// 准备state-用于存储数据
const state = {
    sum: 0,
    persons: []
}

const getters = {
    bigSum(state) {
        return state.sum * 10
    }
}

// 创建并暴露store
export default new Vuex.Store({
    actions,
    mutations,
    state,
    getters
})

